<script setup lang="ts">
import { Material } from "../../index";
import { API_NAME } from "../../api/contants.ts";
import { ref, watch } from "vue";
import PDFViewer from "./PDFViewer.vue";

const props = defineProps<{ material: Material }>();
const url = ref(`${API_NAME}/material/download/` + props.material.id);

watch(
  () => props.material.id,
  (newValue) => {
    url.value = `${API_NAME}/material/download/` + newValue;
  },
);
</script>

<template>
  <!--  <div>{{ material }} -&#45;&#45; {{ material.type === 0 }}</div>-->
  <div class="overflow-hidden" v-if="material.type === 0">
    <div class="text-2xl text-center block p-2 rounded-2xl">
      {{ material.title }}
    </div>
    <PDFViewer
      page-scale="page-fit"
      theme="light"
      :src="url"
      :fileName="material.title"
      @load="
        (pdfApp: any) => {
          console.log('pdfApp: ', pdfApp);
        }
      "
    />
  </div>
  <div v-else>
    <el-link :href="url" class="text-4xl text-red-800">
      点击下载文件---{{ material.title }}---
    </el-link>
  </div>
</template>

<style scoped></style>
